<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/css-head :: css-head">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>题库学习</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/loading/style.css" rel="stylesheet">
    <style type="text/css">
        hr {
            margin-top: 15px;
        }

        html, body {
            width: 100%;

        }

        .answer_class {
            color: red;
        }
    </style>
</head>
<body style="background:url('/static/images/wx_bj/bj_2.jpg') no-repeat;font-size: 14px;background-size: 100% 100%">
<div id="loading" style="display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.5);text-align: center;line-height: 60;">
    <div class="sp sp-circle" style="display: inline-block;top: 50%;left: 50%"></div>
</div>
<div id="div" style="width: 100%;height: 100%;overflow: auto">
    <div style="position: fixed;
    bottom: 2px;
    right: 2px;
    width: 65px;
    height: 65px;background: url('/static/images/reHomeIco.png') no-repeat;
    background-size: 100% 100%;
    " onclick="reHome()">
    </div>
    <div class="col-xs-6" id="toIndex" style="position:fixed;top: 0;right: 0">
        <div class="input-group">
        <span class="input-group-btn">
        <button class="btn btn-default" id="go_btn" type="button">Go!</button>
        </span>
            <input autofocus="autofocus" class="form-control" id="item_index" placeholder="跳转到第n题..." type="number">
        </div>
    </div>
    <div id="form1" style=" width:90%; margin:2px auto;font-size: 20px;">
        <input id="openId" th:value="${staff.getOpenId()}" type="hidden">
        <div style="margin-top: 20px; text-align: center;">
            <h5 class="modal-title text-center" id="accLogModelHead" style="font-size: 3rem">题库学习</h5>
        </div>
        <div>
            <hr style=" height:1px;">
        </div>
        <div id="qss">
        </div>
        <button id="loadMore" style="display: block;width: 90%;height: 10%;color: blue;margin: auto">加载更多题目...</button>
        <button id="reOne" onclick="reOne()" style="display: block;width: 90%;height: 10%;color: blue;margin: auto">
            返回第一题...
        </button>
        <br><br>
    </div>
</div>
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/bower_components/jquery/dist/jquery.cookie.js"></script>
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
    let openId = $("#openId").val();
    let indexPage = 0;
    $(function () {
        let h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
        $("body").height(h + 'px');
        getQs(1);
        $("#toIndex").hide();
        $("#reOne").hide();
    })

    $("#loadMore").click(function () {
        getQs(1);
    })
    let status=true;
    let i = 1;
    setInterval(function () {
        i=1;
    }, 1000);
    let oldHeight=document.getElementById("div").scrollHeight;
    $("#div").scroll(function () {
        let top = $("#div").scrollTop();
        if (top >= 100) {
            $("#toIndex").show();
        }
        if (top < 100) {
            $("#toIndex").hide();
        }

        let scrollHeight=document.getElementById("div").scrollHeight;
        if ((scrollHeight-parseInt(top)< oldHeight*1.2)&&status===true){
            console.log("==========================="+status)
            if (i===1){
                getQs(1);
                i=-1;
            }
        }
    })
let is_add=0;let is_add_more=0;
    function getQs(direction) {
        if (direction === 2) {
            indexPage--;
        }
        if (direction !== 2) {
            indexPage++;
        }
        $.get("getQuestionListByPage?currIndex=" + indexPage, function (result) {
            let list = result.data.list;
            if (list.length === 0) {
                $("#reOne").show();
                $("#loadMore").hide();
                $("#item_index").val('');
                alert("没有更多题了");
            }
            if (direction === 2) {
                list = list.reverse()
            }
            list.forEach(function (qs, start) {
                let index = start + 1 + (indexPage - 1) * 10;
                if (direction === 2) {
                    start = (list.length - 1) - start;
                    index = start + 1 + (indexPage - 1) * 10;
                }
                let select = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
                let answers = (qs.answer).split("");//假如答案 ABC 拆分成[A,B,C]
                if (answers.length === 1&&is_add===0) {
                    $("#qss").append(`
<div style="width: 100%;text-align: center;margin:0 auto 10px">
            <span style="border-radius: 1rem;display: inline-block;height: 2px;width: 25%;background-color: #2b2a2a"></span> <span style="width: 10%">单选题</span> <span style="border-radius:1rem;display: inline-block;height: 2px;width: 25%;background-color: #2b2a2a"></span>
        </div>
                    `)
                    is_add=1;
                }
                if (answers.length > 1&&is_add_more===0) {
                    $("#qss").append(`
<div style="width: 100%;text-align: center;margin:0 auto 10px">
            <span style="border-radius: 1rem;display: inline-block;height: 2px;width: 25%;background-color: #2b2a2a"></span> <span style="width: 10%">多选题</span> <span style="border-radius:1rem;display: inline-block;height: 2px;width: 25%;background-color: #2b2a2a"></span>
        </div>
                    `)
                    is_add_more=1
                }
                if (qs.optionC === '') {

                    if (direction !== 2) {
                        $("#qss").append(`<div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                   Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>`);

                    }
                    if (direction === 2) {
                        $("#qss").prepend(`<div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                   Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>`);

                    }


                    for (let i = 0; i < answers.length; i++) {
                        let indexOf = select.indexOf(answers[i]);
                        $("#" + index).find("td").eq(indexOf).css('color', 'red');
                    }
                    return;
                }
                if (qs.optionD === '') {
                    if (direction !== 2) {
                        $("#qss").append(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                   Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }
                    if (direction === 2) {
                        $("#qss").prepend(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                   Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }

                    for (let i = 0; i < answers.length; i++) {
                        let indexOf = select.indexOf(answers[i]);
                        $("#" + index).find("td").eq(indexOf).css('color', 'red');
                    }
                    return;
                }
                if (qs.optionE === '') {
                    if (direction !== 2) {
                        $("#qss").append(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }
                    if (direction === 2) {
                        $("#qss").prepend(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }


                    for (let i = 0; i < answers.length; i++) {
                        let indexOf = select.indexOf(answers[i]);
                        $("#" + index).find("td").eq(indexOf).css('color', 'red');
                    }
                    return;
                }
                if (qs.optionF === '') {
                    if (direction !== 2) {
                        $("#qss").append(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>E、` + qs.optionE + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }
                    if (direction === 2) {
                        $("#qss").prepend(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>E、` + qs.optionE + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }

                    for (let i = 0; i < answers.length; i++) {
                        let indexOf = select.indexOf(answers[i]);
                        $("#" + index).find("td").eq(indexOf).css('color', 'red');
                    }
                    return;
                }
                if (qs.optionG === '') {
                    if (direction !== 2) {
                        $("#qss").append(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>E、` + qs.optionE + `</td></tr>
                    <tr><td>F、` + qs.optionF + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }
                    if (direction === 2) {
                        $("#qss").prepend(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>E、` + qs.optionE + `</td></tr>
                    <tr><td>F、` + qs.optionF + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }

                    for (let i = 0; i < answers.length; i++) {
                        let indexOf = select.indexOf(answers[i]);
                        $("#" + index).find("td").eq(indexOf).css('color', 'red');
                    }
                    return;
                }
                if (qs.optionH === '') {
                    if (direction !== 2) {
                        $("#qss").append(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>E、` + qs.optionE + `</td></tr>
                    <tr><td>F、` + qs.optionF + `</td></tr>
                    <tr><td>G、` + qs.optionG + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }
                    if (direction === 2) {
                        $("#qss").prepend(
                            `
                     <div id="Q` + index + `" style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                <div class="panel-body">
                    Q` + index + '、' + qs.questionname + `
                </div>
                <table id="` + index + `" class="table">
                    <tr><td>A、` + qs.optionA + `</td></tr>
                    <tr><td>B、` + qs.optionB + `</td></tr>
                    <tr><td>C、` + qs.optionC + `</td></tr>
                    <tr><td>D、` + qs.optionD + `</td></tr>
                    <tr><td>E、` + qs.optionE + `</td></tr>
                    <tr><td>F、` + qs.optionF + `</td></tr>
                    <tr><td>G、` + qs.optionG + `</td></tr>
                    <tr><td>答案:` + qs.answer + `</td></tr>
                </table>
            </div>
                    `
                        );
                    }
                    for (let i = 0; i < answers.length; i++) {
                        let indexOf = select.indexOf(answers[i]);
                        $("#" + index).find("td").eq(indexOf).css('color', 'red');
                    }
                    return;
                }
                if (direction !== 2) {
                    $("#qss").append(
                        `
                         <div id="Q` + index + `"  style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                    <div class="panel-body">
                        Q` + index + '、' + qs.questionname + `
                    </div>
                    <table id="` + index + `" class="table">
                        <tr><td>A、` + qs.optionA + `</td></tr>
                        <tr><td>B、` + qs.optionB + `</td></tr>
                        <tr><td>C、` + qs.optionC + `</td></tr>
                        <tr><td>D、` + qs.optionD + `</td></tr>
                        <tr><td>E、` + qs.optionE + `</td></tr>
                        <tr><td>F、` + qs.optionF + `</td></tr>
                        <tr><td>G、` + qs.optionG + `</td></tr>
                        <tr><td>H、` + qs.optionH + `</td></tr>
                        <tr><td>答案:` + qs.answer + `</td></tr>
                    </table>
                </div>
                        `
                    );
                }
                if (direction === 2) {
                    $("#qss").prepend(
                        `
                         <div id="Q` + index + `"  style="background-color: rgba(255,255,255,0.6);" class="panel panel-default">
                    <div class="panel-body">
                        Q` + index + '、' + qs.questionname + `
                    </div>
                    <table id="` + index + `" class="table">
                        <tr><td>A、` + qs.optionA + `</td></tr>
                        <tr><td>B、` + qs.optionB + `</td></tr>
                        <tr><td>C、` + qs.optionC + `</td></tr>
                        <tr><td>D、` + qs.optionD + `</td></tr>
                        <tr><td>E、` + qs.optionE + `</td></tr>
                        <tr><td>F、` + qs.optionF + `</td></tr>
                        <tr><td>G、` + qs.optionG + `</td></tr>
                        <tr><td>H、` + qs.optionH + `</td></tr>
                        <tr><td>答案:` + qs.answer + `</td></tr>
                    </table>
                </div>
                        `
                    );
                }
                for (let i = 0; i < answers.length; i++) {
                    let indexOf = select.indexOf(answers[i]);
                    $("#" + index).find("td").eq(indexOf).css('color', 'red');
                }
            })
        });
    }

    $("#go_btn").click(function () {
         is_add=0; is_add_more=0;
         status = false;
        let item_index = $("#item_index").val();
        let number = parseInt(item_index, 10);
        let number1 = number % 10;
        let number2 = (number - number1) / 10;
        if (number1 === 0) {
            indexPage = number2 - 1
        } else {
            indexPage = number2;
        }
        getQs(1);
        $("#qss").empty();
        setTimeout(function () {
            let element = document.getElementById("Q" + item_index);
            if (element !== null) {
                element.scrollIntoView(true);
            }
            status = true;
        }, 100)
    })

    function reHome() {
        $("#loading").show();
        window.location.href = "/goWxIndex?id=" + openId;
    }

    function reOne() {
        is_add=0; is_add_more=0;
        indexPage = 0;
        $("#qss").empty();
        getQs(1);
    }

    pushHistory();

    function pushHistory() {
        history.pushState('', '', 'goWxIndex?id=' + openId)
    }
</script>
</body>
</html>
